<template>
  <div class="dashboard-container">
    <el-row class="top" :gutter="24">
      <el-col class="left" :span="14">
        <el-card class="box-card">
          <p>机构概述</p>
          <div class="content">
            <div class="content-left">
              <div class="name">西三旗分拣中心</div>
              <div class="address">地址:北京顺义区天澜综合保税区123号</div>
              <div class="duty-people">负责人：赵五金 16712345678</div>
              <el-button type="danger">查看营业部分布</el-button>
            </div>
            <div class="content-right">
              <div class="box">
                <div class="label">分拣中心(个)</div>
                <div class="num">1</div>
              </div>
              <div class="box">
                <div class="label">营业部(个)</div>
                <div class="num">4</div>
              </div>
              <div class="box">
                <div class="label">司机人数(个)</div>
                <div class="num">48</div>
              </div>
              <div class="box">
                <div class="label">快递员人数(个)</div>
                <div class="num">64</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col class="right" :span="10">
        <el-card class="box-card">
          <div class="header">
            <p>今日数据</p>
            <div class="refresh-box">2023</div>
          </div>
          <el-row :gutter="24">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="label">订单金额(元)</div>
                <div class="value">2,284</div>
                <div class="bottom">较昨天 +342</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="label">订单数量(笔)</div>
                <div class="value">193</div>
                <div class="bottom">较昨天 +27</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <div class="label">运输任务(次)</div>
                <div class="value">38</div>
                <div class="bottom">较昨天 +26</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="14">
        <el-card>
          <div class="header">
            <p class="todoTasks">
              待办任务
              <el-tooltip
                class="item"
                popper-class="my-tooltip"
                content
                effect="light"
                placement="bottom"
              >
                <div slot="content" class="todoTasks1">
                  待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件
                  <br>待派送率=待派送/(待派送+派送中+已签收+拒收)
                  <br>未分配率=未分配/全部数据
                  <br>超时率=超时任务/(已完成+进行中+已取消)
                </div>
                <img src="@/assets/tishi.png" alt>
              </el-tooltip>
            </p>
          </div>
          <div class="ball">
            <div class="ball-chart-box">123</div>
          </div>
          <div class="botton-label">
            <div class="item">
              <span>待取件</span>
              <span>39</span>
            </div>
            <div class="item">
              <span>待派件</span>
              <span>18</span>
            </div>
            <div class="item">
              <span>未分配运输</span>
              <span>4</span>
            </div>
            <div class="item">
              <span>超时运输</span>
              <span>5</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="10">
        <el-card>
          <div class="header">
            <p class="todoTasks">
              待办任务
              <el-tooltip
                class="item"
                popper-class="my-tooltip"
                content
                effect="light"
                placement="bottom"
              >
                <div slot="content" class="todoTasks1">
                  待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件
                  <br>待派送率=待派送/(待派送+派送中+已签收+拒收)
                  <br>未分配率=未分配/全部数据
                  <br>超时率=超时任务/(已完成+进行中+已取消)
                </div>
                <img src="@/assets/tishi.png" alt>
              </el-tooltip>
            </p>
          </div>
          <div class="ball">
            <div class="ball-chart-box">123</div>
          </div>
          <div class="botton-label">
            <div class="item">
              <span>运输中</span>
              <span>39</span>
            </div>
            <div class="item">
              <span>派送中</span>
              <span>18</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card>
          <p class="Commonfunctions">常用功能</p>
          <div class="useFeaturelist">
            <div class="item">
              <img src="~@/assets/kuaidi.png" alt>
              <p>快递作业</p>
            </div>
            <div class="item">
              <img src="~@/assets/yunshu.png" alt>
              <p>运输任务</p>
            </div>
            <div class="item">
              <img src="~@/assets/luxian.png" alt>
              <p>线路管理</p>
            </div>
            <div class="item">
              <img src="~@/assets/cheliang.png" alt>
              <p>车辆管理</p>
            </div>
            <div class="item">
              <img src="~@/assets/siji.png" alt>
              <p>司机管理</p>
            </div>
            <div class="item">
              <img src="~@/assets/yunfei.png" alt>
              <p>运费查询</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <p class="LineManagement">线路管理</p>
          <div id="line-manage-chart">.</div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="ysHeader">
            <p>运输任务</p>
            <span class="search-more">查看更多</span>
          </div>
          <div class="table_th">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="date" label="日期" width="180" />
              <el-table-column prop="name" label="姓名" width="180" />
              <el-table-column prop="address" label="地址" />
              <el-table-column prop="address" label="地址" />
              <el-table-column prop="address" label="地址" />
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <div class="dd-header">
            <p class="Totalorders">订单总量</p>
            <div class="Totalorderstime">2022-11 - 2023-04</div>
          </div>
          <p class="Totalorderstype">单位：笔</p>
          <div class="order-static">
            <div class="item">
              <div class="num">74,423</div>
              <div class="label">订单最高值</div>
            </div>
            <div class="item">
              <div class="num">12,244</div>
              <div class="label">订单平均值</div>
            </div>
            <div class="item">
              <div class="num">25,661</div>
              <div class="label">订单最低值</div>
            </div>
          </div>
          <div class="order-account-chart">
            <div>
              .
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="dd-header">
            <p class="Totalorders">订单分布</p>
            <div class="Totalorderstime">2022-11 - 2023-04</div>
          </div>
          <p class="Totalorderstype">单位：笔</p>
          <div class="order-account-chart" style="height: 480px;">
            <div style="height: 480px;">
              .
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 24px;
    margin-top: 0;
    .top {
      margin-top: 20px;
      .left {
        .box-card {
          p {
            font-size: 16px;
            font-weight: 700;
            margin: 0;
            margin-bottom: 16px;
          }
          .content {
            display: flex;
            .content-left {
              flex: 1;
              padding-left: 10px;
              border-right: 1px solid #ebeef5;
              .name {
                font-size: 16px;
                margin-top: 20px;
                margin-bottom: 13px;
              }
              .address {
                font-size: 14px;
                color: #818693;
                margin-bottom: 8px;
              }
              .duty-people {
                font-size: 14px;
                color: #818693;
                margin-bottom: 23px;
              }
              .el-button {
                font-size: 14px;
                color: #e15536;
                width: 158px;
                height: 40px;
                background: #ffeeeb;
                border: 1px solid #f3917c;
                border-radius: 4px;
                cursor: pointer;
              }
            }
            .content-right {
              flex: 1;
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              width: 300px;
              .box {
                flex: 50%;
                display: flex;
                height: 85px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .label {
                  font-size: 14px;
                  margin-bottom: 10px;
                }
                .num {
                  font-size: 32px;
                  font-weight: 700;
                  color: #e15536;
                  cursor: pointer;
                }
              }
            }
          }
        }
      }
      .right {
        .box-card {
          min-height: 60px;
          .header {
            display: flex;
            justify-content: space-between;
            p {
              font-size: 16px;
              font-weight: 700;
              margin: 0;
              margin-bottom: 21px;
            }
          }
          .el-row {
            display: flex;
            margin-top: 6px;
            padding-left: 10px;
            .grid-content {
              display: flex;
              flex-direction: column;
              text-align: center;
              .label {
                font-size: 14px;
                color: #20232a;
                margin-bottom: 21px;
              }
              .value {
                font-size: 36px;
                color: #20232a;
                font-weight: 700;
                margin-bottom: 24px;
              }
              .bottom {
                font-size: 14px;
                color: #818693;
                margin-bottom: 20px;
                padding-left: 9px;
              }
            }
          }
        }
      }
    }
    .el-col {
      position: relative;
      padding: 0 12px !important;
      margin-bottom: 20px;
    }
    .header {
      .todoTasks {
        display: flex;
        margin-top: 0;
        font-size: 16px;
        color: #20232a;
        font-weight: 700;
        img {
          width: 20px;
          margin-left: 6px;
        }
        .my-tooltip {
          border: none;
        }
      }
    }
    .ball {
      position: relative;
      width: 695px;
      height: 208px;
      .ball-chart-box {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 695px;
        height: 208px;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        padding: 0px;
        margin: 0px;
        border-width: 0px;
      }
    }
    .botton-label {
      display: flex;
      position: absolute;
      top: 235px;
      width: 100%;
      justify-content: space-around;
      padding-right: 40px;
      .item {
        flex: 25%;
        text-align: center;
        font-weight: 700;
        color: #303133;
        span:nth-child(2) {
          padding-left: 8px;
          color: #e15536;
        }
      }
    }

    .Commonfunctions {
      font-size: 16px;
      font-weight: 700;
      margin-top: 0;
    }
    .useFeaturelist {
      display: flex;
      justify-content: space-between;
      .item {
        width: 15.15%;
        height: 116px;
        background: #fafafb;
        border-radius: 10px;
        cursor: pointer;
        img {
          width: 40px;
          height: 40px;
          margin: 0 auto;
          display: block;
          margin-top: 20px;
        }
        p {
          font-size: 16px;
          color: #20232a;
          font-weight: 700;
          text-align: center;
        }
      }
    }
    .LineManagement {
      font-size: 16px;
      font-weight: 700;
      margin-top: 0;
    }
    #line-manage-chart {
      height: 400px;
      background-color: #e15536;
    }
    .ysHeader {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      p {
        margin-top: 0;
        font-size: 16px;
        color: #20232a;
        font-weight: 700;
      }
      .search-more {
        font-size: 14px;
        color: #818693;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        cursor: pointer;
      }
    }
    .dd-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      .Totalorders {
        margin-top: 0;
        font-size: 16px;
        color: #20232a;
        font-weight: 700;
      }
      .Totalorderstime {
        font-size: 14px;
        color: #818693;
      }
    }
    .Totalorderstype{
     font-size: 14px;
     color: #818693;
     margin-top: 0;
    }
    .order-static{
      display: flex;
      justify-content: space-evenly;
      margin-top: 38px;
      .item{
        .num{
          font-size: 28px;
          color: #e15536;
          font-weight: 700;
          text-align: center;
          margin-bottom: 5px;
        }
        .label{
          font-size: 12px;
          color: #818693;
          text-align: center;
        }
      }
    }
    .order-account-chart{
      position: relative;
      width: 587px;
      height: 400px;
        div{
        position: absolute;
        left: 30px;
        top: 0px;
        width: 587px;
        height: 400px;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        padding: 0px;
        margin: 0px;
        border-width: 0px;
        background-color: #e15536;
        }
    }
  }
}
</style>
